<template>
	<view>
		<!-- 上部 -->
		<view class="header">
			<view class="total">
				共3条
			</view>
			<!-- 查看不同状态订单信息 -->
			<view class="status"  >
				<text>状态:</text>
				<image src="../../static/jiantou.png" @click="toggleDropdown"></image>
				
				   <!-- 下拉框 -->
				      <view class="dropdown" v-show="isDropdownVisible">
				        <view 
				          v-for="(item, index) in dropdownItems1" 
				          :key="index" 
				          class="dropdown-item" 
				          :class="{ 'selected': item === selectedOption }" 
				          @click="selectOption(item)"
				        >
				          {{ item }}
				        </view>
				      </view>
			</view>
			<!-- 维修方式 -->
			<view class="status2"  >
				<text>维修方式:</text>
				<image src="../../static/jiantou.png" @click="toggleDropdown2"></image>
				
				   <!-- 下拉框 -->
				      <view class="dropdown" v-show="isDropdownVisible2">
				        <view 
				          v-for="(item, index) in dropdownItems2" 
				          :key="index" 
				          class="dropdown-item" 
				          :class="{ 'selected': item === selectedOption2 }" 
				          @click="selectOption2(item)"
				        >
				          {{ item }}
				        </view>
				      </view>
			</view>
			<!-- 日期 -->
			<view class="date">
				<image src="../../static/riqi.png" mode=""></image>
				<text>日期</text>
			</view>
		</view>
		<!-- 列表 -->
		<view v-for=" (item, index) in appointments" :key="index"  class="list">
			<view class="maintenanceNum">
				维修单号: &nbsp; {{item.date.num}}
			</view>
			<view class="hongqi"  v-if="item.isReminder">
				<image src="../../static/hongqi.png" ></image>
			</view>
			<view class="maintenanceMethod">
				维修方式: &nbsp; {{item.date.mothos}}
			</view>
			<view class="appointmentDate">
				预约日期: &nbsp; {{item.date.data}}
			</view>
			
			<!-- 状态 -->
			<view class="status3"  v-if="item.date.status == 1" >
				进行中
			</view>
			<view class="status3" v-else :style="{color : color}">
				已完成
			</view>
			<!-- 查看详情按钮 -->
			<button class="button" @click="toDetail">查看详情</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDropdownVisible: false, // 控制下拉框的显示状态
				isDropdownVisible2: false,
				selectedOption: null, // 当前选中的项
				selectedOption2: null,
				dropdownItems1: ['待服务', '已完成'] ,// 状态的下拉项列表
				dropdownItems2: ['到店维修', '上门取车'] ,// 维修方式的下拉项列表
				dataList:[
					{id:1,num:3535252,mothos:"到店维修",data:"2024-11-12T10:00:00",status:"1"},
					{id:2,num:3535252,mothos:"到店维修",data:"2024-11-12 10:00:00",status:"2"},
					{id:3,num:3535252,mothos:"到店维修",data:"2024-11-11 10:00:00",status:"1"}
					
				],
				color:"#9A9A9A",
				
				appointments: []
				
			}
		},
		methods: {
			toggleDropdown() {
			     this.isDropdownVisible = !this.isDropdownVisible; // 切换下拉框的显示状态
			   },
			   toggleDropdown2() {
			        this.isDropdownVisible2 = !this.isDropdownVisible2; // 切换下拉框的显示状态
			      },
			   selectOption(option) {
			     this.selectedOption = option; // 更新选中的项
			     this.isDropdownVisible = false; // 关闭下拉框
			   },
			   selectOption2(option) {
			     this.selectedOption2 = option; // 更新选中的项
			     this.isDropdownVisible2 = false; // 关闭下拉框
			   },
			   formattedDate(item) {
			       const date = new Date(item.date);
			       return date.toLocaleString();
			     },
			   checkReminders() {
			     const now = new Date().getTime();
			     const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
			   
			     this.appointments = this.dataList.map(date => {
					console.log("date ="+date.data);
					
			       const appointment = new Date(date.data).getTime();
				   console.log("appointment ="+appointment);
			       // const diff = now - appointment;
				   const diff = appointment - now;
			   	console.log("diff = "+diff);
			       const isReminder = diff < oneDay && diff > 0;
			   	
			   	console.log(isReminder);
			   
			       return {
			         date,
			         formattedDate: this.formattedDate(date),
			         isReminder
			       };
			     });
			     // console.log(this.appointments);
			   },
			   toDetail(){
				   uni.navigateTo({
					   
				   	url:"/pages/MaintenanceTasks/Details"
				   })
			   }
			
		},
		mounted() {
		  this.checkReminders();
		  // 每隔一段时间检查一次，确保状态更新
		  setInterval(() => {
		    this.checkReminders();
		  }, 60000); // 每分钟检查一次
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/* 列表样式 */
	.list{
		left: 4px;
		height: 95px;
		margin-right: 15px;
		top: 8px;
		border-bottom: 1px solid #E0E0E0;
		position: relative;
	}
	.hongqi image{
		left: -2px;
		top: 2px;
		width: 20px;
		height: 20px;
		position: absolute;
	}
	.maintenanceNum{
		left: 20px;
		top: 3px;
		line-height: 20px;
		font-size: 14px;
		/* font-weight: bold; */
		text-align: left;
		position: absolute;
	}
	.maintenanceMethod{
		left: 20px;
		top: 33px;
		line-height: 20px;
		font-size: 14px;
		/* font-weight: bold; */
		text-align: left;
		position: absolute;
	}
	.appointmentDate{
		left: 20px;
		top: 63px;
		line-height: 20px;
		font-size: 14px;
		/* font-weight: bold; */
		text-align: left;
		position: absolute;
	}
	.status3{
		right: 10px;
		top: 4px;
		width: 94px;
		line-height: 30px;
		background-color: rgba(255,255,255,1);
		color: rgba(29,111,255,1);
		font-size: 16px;
		position: absolute;
	}
	.button{
		right: 35px;
		top: 60px;
		
		height: 24px;
		line-height: 20px;
		border-radius: 4px;
		background-color: rgba(85,122,214,1);
		color: rgba(255,255,255,1);
		font-size: 16px;
		text-align: center;
		border: 1px solid rgba(255,0,0,0);
		position: absolute;
	}
	/* 上部样式 */
	
	.header{
		/* border: 1px solid rgba(239,239,239,1); */
		/* border-bottom: 1px solid #E0E0E0; */
		height: 45px;
		position: relative;
	}
	/* 日期样式 */
	/* .data{
		left: 336px;
		top: 83px;
		margin-left: 60px;
		position: absolute;
	} */
	.date image{
		top: 13px;
		
		right: 50px;
		width: 20px;
		height: 20px;
		position: absolute;
	}
	.date text{
		
		top: 13px;
		right: 20px;
		font-weight: bold;
		position: absolute;
	}
	.total{
		left: 6px;
		top: 15px;
		height: 17px;
		line-height: 17px;
		font-weight: bold;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		position: absolute; 
	}
	/* 下拉框样式 */
	.dropdown {
	
	width: 86px;
	position: absolute;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	margin-top: 5px; /* 与图标之间的间距 */
	z-index: 1000; /* 确保下拉框在其他元素之上 */
	}
	
	.dropdown-item {
		
	  padding: 10px 15px;
	  cursor: pointer;
	  border-bottom: 1px solid #e0e0e0;
	}
	
	.dropdown-item:last-child {
	  border-bottom: none;
	}
	
	.dropdown-item:hover {
	  background-color: #f0f0f0;
	}
	
	/* 选中项样式 */
	.selected {
	  background-color: blue;
	  color: white;
	}
	.status2{
		/* left: 180px; */
		right: 150px;
		top: 13px; 
		background-color: rgba(255,255,255,1);
		position: absolute;
	}
	/* 箭头样式 */
	.status{
		left: 80px;
		top: 13px; 
		background-color: rgba(255,255,255,1);
		position: absolute;
	}
	.status image{
		top: 5px;
		left: 40px;
		width: 25px;
		height: 20px;
		position: absolute;
	}
	.status text{
		/* top: 15px; */
		height: 17px;
		line-height: 17px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
	}
	.status2 image{
		top: 5px;
		left: 65px;
		width: 25px;
		height: 20px;
		position: absolute;
	}
	.status2 text{
		/* top: 15px; */
		height: 17px;
		line-height: 17px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
	}

</style>
